<template>
  <view>
    <view class="accredit_model">
      <view class="model_container">
        <view class="model_top">
          <image class="model_icon" :src="urlDomain+'crmebimage/presets/model_img.png'"></image>
        </view>
        <view class="model_content">
          <view class="model_title">提示</view>
          <view class="model_desc">{{ content }}</view>
          <view class="model_btns">
            <view class="mbtn cancel_btn" @click="modelCancel()">取消</view>
            <view class="mbtn confirm_btn" @click="modelConfirm()" v-if="locationType">确定</view>
            <button class="mbtn confirm_btn" v-if="userPhoneType" open-type="getPhoneNumber"
                    @getphonenumber="getphonenumber">确定
            </button>
          </view>
        </view>
      </view>
    </view>
    <view class="mask"></view>
  </view>
</template>
<script>
import Routine from '@/libs/routine';
import {getUserPhone} from '@/api/public';
import {silenceBindingSpread} from "../../utils";
import {
  mapGetters
} from "vuex";

const app = getApp();
export default {
  name: '',
  props: {
    locationType: {
      type: Boolean,
      default: false
    },
    userPhoneType: {
      type: Boolean,
      default: false
    },
    authKey: {
      type: String,
      default: '',
    },
    isPhoneBox: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: '申请获取用于完整服务',
    }
  },
  computed: mapGetters(['isLogin', 'uid', 'globalData']),
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      isStatus: false
    }
  },
  methods: {
    modelCancel() {
      this.$emit('closeModel', {isStatus: this.isStatus});
    },
    modelConfirm() {
      this.$emit('confirmModel');
    },
    // #ifdef MP
    // 小程序获取手机号码
    getphonenumber(e) {
      console.log("sdasssssdasssssdasssssdassss  ", e);
      uni.showLoading({title: '加载中'});
      Routine.getCode()
          .then(code => {
            this.getUserPhoneNumber(e.detail.encryptedData, e.detail.iv, code);
          })
          .catch(error => {
            this.modelCancel();
            uni.hideLoading();
          });
    },
    // 小程序获取手机号码回调
    getUserPhoneNumber(encryptedData, iv, code) {
      getUserPhone({
        encryptedData: encryptedData,
        iv: iv,
        code: code,
        key: this.authKey,
        type: 'routine'
      })
          .then(res => {
            this.$store.commit('LOGIN', {
              token: res.data.token
            });
            this.$store.commit("SETUID", res.data.id);
            this.getUserInfo();
            if (res.data.isNew && res.data.newPeopleCouponList && res.data.newPeopleCouponList.length !== 0) {
              this.$Cache.set('newGift', res.data.newPeopleCouponList);
            } else {
              this.$Cache.clear('newGift');
            }
          })
          .catch(res => {
            uni.hideLoading();
            this.$util.Tips({
              title: res
            });
          });
    },
    /**
     * 获取个人用户信息
     */
    getUserInfo() {
      this.$store.dispatch("GetTokenIsExist");
      // #ifdef MP
      if (!this.$Cache.get('wechatQRcode')) Routine.getQrcode()
      // #endif
      //分销绑定
      silenceBindingSpread(true, this.globalData.spread)

      this.$store.dispatch('USERINFO').then(res => {
        uni.hideLoading();
        this.isStatus = true
        this.modelCancel();
      });
    },
    // #endif
  }
}
</script>

<style scoped lang="scss">
.accredit_model {
  /* position: relative; */
  width: 560rpx;
  height: 660rpx;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.model_container {
  width: 100%;
  height: 660rpx;
}

.model_top {
  width: 100%;
  height: 270rpx;
  // background: #D64532;
  //@include main_bg_color(theme);
  border-radius: 20rpx 20rpx 0 0;
  background-image: url();
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.model_icon {
  width: 230rpx;
  height: 210rpx;
}

.model_content {
  width: 100%;
  height: 390rpx;
  background-color: #fff;
  border-radius: 0 0 20rpx 20rpx;
  padding: 32rpx;
  box-sizing: border-box;
}

.model_title {
  text-align: center;
  font-size: 36rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 50rpx;
}

.model_desc {
  width: 448rpx;
  height: 96rpx;
  margin: 20rpx auto 0;
  font-size: 32rpx;
  text-align: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 48rpx;
}

.model_btns {
  width: 448rpx;
  height: 82rpx;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.mbtn {
  width: 208rpx;
  height: 82rpx;
  border-radius: 42rpx;
  margin-top: 44rpx;
}

.cancel_btn {
  background: #F5F5F5;
  font-weight: 400;
  color: #666666;
  line-height: 82rpx;
  text-align: center;
  font-size: 32rpx;
}

.confirm_btn {
  //@include linear-gradient(theme);
  background-color: #8B4513;
  font-weight: 400;
  color: #fff;
  line-height: 82rpx;
  text-align: center;
  font-size: 32rpx;
}

.mask {
  z-index: 900;
}
</style>
